<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
    组件化：我们将一个完整的页面分成很多个组件，每个组件都用于实现页面的一个功能块，而每个组件又可以进行细分
    组件化思想的应用：尽可能的将页面拆分成一个个小的，可复用的组件，方便我们来组织和管理代码
    组件内的使用步骤：
      1.调用vue.extend()方法  创建组件构造器对象
      2.调用vue.component()方法  注册组件
      3.在vue实例的作用范围内    使用组件
-->
<div id="app">
<!--3.使用组件-->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <div>
    <my-cpn></my-cpn>
  </div>
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.创建组件构造器Vue.extend({}):传入一个对象为参数
  //传入template代表我们自定义组件的模板，该模板就是使用到组件的地方，要显示的HTML代码
  const cpnC=Vue.extend({
    template:`
      <div>
         <h2>山河令</h2>
         <p>山河不足重，重在遇知己</p>
         <p>既见君子，云胡不喜</p>
     </div>`
  })
  
  //2.注册组件 Vue.component('组件的标签名',组件构造器)
  Vue.component('my-cpn',cpnC)
  
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
  })

</script>
</body>
</html>